<template>
    <div class="notFound">
        <div class="box_shadow">
            <div class="box">
                <div class="corner">
                    Z550.CN
                </div>
                <dl>
                    <dt>
                        <h3>ERROR</h3>
                        <h1>404</h1>
                        <h5>Page Not Found</h5>
                    </dt>
                    <dd>
                        <router-link to="/">
                            <button>返回首页</button>
                        </router-link>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useIndexStore } from '@/store/path'
const indexStore = useIndexStore()
indexStore.$patch({
    showLoading: false
})
</script>
<style lang="less" scoped>
.notFound {
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .box_shadow {
        margin: 0 auto;

        .box {
            padding: 60px;
            text-align: center;
            animation: flips 5s infinite;
            overflow: hidden;
            position: relative;
            .corner{
                width: 120px;
                height: 30px;
                background: var(--bs-theme-color);
                text-align: center;
                line-height: 30px;
                color: var(--bs-bg-color);
                right: -30px;
                top: 14px;
                transform: rotateZ(45deg);
                position: absolute;
                font-size: 14px;
            }
            h3 {
                font-weight: normal;
                font-size: 32px;
            }

            h1 {
                font-size: 110px;
                font-weight: normal;
                color: var(--bs-theme-color);
            }

            h5 {
                font-size: 24px;
                font-weight: normal;
                margin-bottom: 40px;
            }

            button {
                line-height: 34px;
                height: 34px;
                background: var(--bs-theme-color);
                color: var(--bs-bg-color);
                border-radius: 4px;
            }
        }
    }
}</style>